<template>
  <div class="orderManageDetailMain">
    <div class="baseInfoBox" v-show="info.orderType === 1">
      <a-row class="itemDesc">
        <a-col :md="10" class="itemCol">
          <p class="itemTitle">{{ $t('goodsCode') }}</p>
          <p class="itemValue">{{ info.goodsCode || '-' }}</p>
        </a-col>
        <a-col :md="14" class="itemCol">
          <p class="itemTitle">{{ $t('goodsName') }}</p>
          <p class="itemValue">{{ info.goodsName || '-' }}</p>
        </a-col>
      </a-row>
    </div>
    <!-- 服务列表 -->
    <div class="orderManageDetailTbBox">
      <s-table
        ref="table"
        class="h100"
        :columns="columns"
        :data-source="tbData"
        :row-key="(record,index)=>index"
      >
        <template
          slot-scope="text"
          v-for="column in commonColumns"
          :slot="column.scopedSlots.customRender"
        >
          <table-ellipsis :text="text" :key="column.dataIndex"></table-ellipsis>
        </template>
        <template #serviceExpireDate="text">
          <table-ellipsis :text="$commonFun.getDateStr(text)"></table-ellipsis>
        </template>
        <template #serviceCycle="text">
          <table-ellipsis :text="text || '-'"></table-ellipsis>
        </template>
        <template #goodsQuantity="text">
          <table-ellipsis :text="text || '-'"></table-ellipsis>
        </template>
      </s-table>
    </div>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import { orderDetailTbColumns } from '../config/list'
export default {
  components: {
    TableEllipsis,
    STable
  },
  props: {
    info: {
      type: Object,
      default () {
        return {}
      }
    },
    tbData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    commonColumns () {
      return this.columns.filter(item => !item.special)
    }
  },
  data () {
    return {
      columns: orderDetailTbColumns
    }
  },
  mounted () {
  },
  watch: {

  },
  methods: {

  }
}
</script>
<style lang="less" scoped>
.orderManageDetailMain {
  height: 100%;
  display: flex;
  flex-direction: column;
  .baseInfoBox {
    flex:none;
  }
  .orderManageDetailTbBox {
    flex:1 0 0;
    min-height: 400px;
  }
}
</style>
<style lang="less">
.orderManageDetailMain {
  .mb20 {
    margin-bottom: 20px;
  }

  .itemDesc {
    margin-bottom: 10px;
  }
  .itemCol{
    display: flex;
  }

  .itemTitle {
    font-weight: 700;
    margin-right: 20px;
  }

  .itemValue {
    padding-right: 8px;
  }
}
</style>
